<template>
    <div style="padding: 30px 0">
        <nav class="nav">
            <router-link :to="{ path: item.path }" class="nav-item" :class="{ active: $route.path === item.path }"
                v-for="item in list" :key="item.id">
                <h3>{{ item.name }}</h3>
            </router-link>
        </nav>
    </div>
</template>

<script>
export default {
    name: 'MainNav',
    data () {
        return {
            list: [
                { id: 1, name: '首页', path: '/' },
                { id: 2, name: '热门标讯', path: '/biaoxun' },
                { id: 3, name: '最新资讯', path: '/news' },
                { id: 4, name: '全部装备', path: '/products' }
            ]
        }
    },
    methods: {
    },
}
</script>

<style scoped lang="less">
.nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(25%, 1fr));
    border-radius: 4px;
    overflow: hidden;

    .nav-item {
        position: relative;
        text-align: center;
        padding: 15px;
        font-size: 20px;
        color: #fff;
        background: #f15953;
        cursor: pointer;
        text-decoration: none;

        &:not(:last-child) {
            &::after {
                content: '';
                position: absolute;
                top: 10%;
                right: 0;
                width: 2px;
                height: 80%;
                background-color: #fff;
            }
        }

        h3 {
            position: relative;
            font-weight: 500;
            overflow: hidden;

            &::before {
                content: '\e791';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                left: -20px;
                /* 初始位置在左侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: left 0.5s ease;
                /* 淡入动画 */
            }

            &::after {
                content: '\e792';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                right: -20px;
                /* 初始位置在右侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: right 0.5s ease;
                /* 淡入动画 */
            }
        }

        &.active {
            background: #ef312a;
        }

        &:hover,
        &.active {
            h3 {
                &::before {
                    left: 30%;
                }

                &::after {
                    right: 30%;
                }
            }
        }
    }
}
</style>